<template>
	<div>
		<!-- 全局数据操作按钮 -->
		<p>
			<button class="btn btn-white btn-default btn-round" @click="list(1)">
				<i class="ace-icon fa fa-refresh"></i>刷新
			</button>
			&nbsp;
			<button class="btn btn-white btn-default btn-round" @click="add">
				<i class="ace-icon glyphicon glyphicon-plus"></i>新增
			</button>
			&nbsp;
			<button class="btn btn-white btn-default btn-round" @click="test">
				<i class="ace-icon glyphicon glyphicon-tent"></i>测试
			</button>
		</p>


		<!--模态框 -->
		<div>
			<save id="save-modal" :user="user"></save>
		</div>
		
		<div>
			<editPassword id="editPassword-modal" :user="user"></editPassword>
		</div>

		<!-- 列表数据 -->
		<table id="simple-table" class="table  table-bordered table-hover">
			<thead>
				<tr>
					<th>id</th>
					<th>昵称</th>
					<th>用户名</th>
					<th>密码</th>
					<th>操作</th>
				</tr>
			</thead>
	
			<tbody>
				<tr v-for="item in users" :key="item.id">
					<td>{{item.id}}</td>
					<td>{{item.name}}</td>
					<td>{{item.username}}</td>	
					<td>{{item.password}}</td>
					<td><operation :user="item"/></td>									
				</tr>
			</tbody>
		</table>

		<div class="paginations">
			<pagination :list="list" ref="pagination"></pagination>
		</div>
	</div>
</template>

<script>
	import operation from '@/views/user/components/operation'
	import save from '@/views/user/components/save'
	import editPassword from '@/views/user/components/editPassword'
	import pagination from '@/views/components/pagination'
	export default {
		data() {
			return {
				users: [],
				user: {},
				userDefaultImage: '/image/讲师头像/头像1.jpg'
			}
		},
		components: {
			operation,
			pagination,
			save,
			editPassword
		},
		mounted() {
			this.list(1)
		},
		methods: {
			list(page) {
				let param = {
					pageIndex: page,
					pageSize: this.$refs.pagination.size
				}
				let url = process.env.VUE_APP_SERVER + 'system/admin/user/list'
				this.$axios.post(url, param)
					.then(res => {
						console.log('user-list')
						let data = res.data.data
						this.users = data.list
						this.$refs.pagination.render(page, data.total)
					})
			},
			test() {
				let chars = [1, 2, 3, 4, 5, 6, 7, 8, 9]
				let radix = 8
				let num = Math.random()
				console.log(0 || 2.2)
				console.log(chars[2 | 3])
			},
			add() {
				this.user = {}
				$('#save-modal').modal('show')
			}
		}
	}
</script>

<style scoped>
	.table {
		margin-bottom: 5px;
	}

	.paginations {
		text-align: right;
	}
</style>
